<template>
    <div class="container">
        <h1>注册</h1>
        <el-form
                :label-position="'left'"
                label-width="100px"
                :model="registerData"
                style="max-width: 460px"
        >
            <el-form-item label="邮箱">
                <el-input
                        v-model="registerData.email"
                        placeholder="请输入邮箱"
                        clearable
                        prefix-icon="User"
                />
            </el-form-item>
            <el-form-item label="密码">
                <el-input
                        v-model="registerData.password"
                        placeholder="请输入密码"
                        show-password
                        clearable
                        prefix-icon="Key"
                        maxlength="15"
                />
            </el-form-item>
            <el-row>
                <el-form-item label="验证码">
                    <el-input
                            v-model="registerData.captcha"
                            placeholder="请输入验证码"
                            clearable
                            prefix-icon="Clock"
                            maxlength="6"
                    />
                </el-form-item>
                <el-button type="primary" @click="getCaptchaCommand">获取验证码</el-button>
            </el-row>
        </el-form>
        <el-button type="primary" @click="registerCommand">注册</el-button>
        <el-button type="primary" @click="gotoLogin">前往登录</el-button>
    </div>
</template>

<script lang="ts">

import {reactive} from 'vue'

import {register} from '@/api/CloudUser.ts';
import {getCaptcha} from "@/api/Email.ts";
import {ElMessage} from "element-plus";
let regEmail=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
export default {
    data(){
        return{
            registerData : reactive({
                email: '',
                password: '',
                captcha:'',
            })
        }
    },
    methods:{
        getCaptchaCommand(){
            if(this.registerData.email==''){
                ElMessage.error("请输入邮箱")
                return;
            }
            if (!regEmail.test(this.registerData.email)) {
                ElMessage.error("请输入正确的邮箱")
                return;
            }
            const params={
                receiver:this.registerData.email,
            }
            getCaptcha(params).then(response=>{

            })
        },
        registerCommand(){
            if(this.registerData.email==''){
                ElMessage.error("请输入邮箱")
                return
            }
            if (!regEmail.test(this.registerData.email)) {
                ElMessage.error("请输入正确的邮箱")
                return;
            }
            if(this.registerData.password==''){
                ElMessage.error("请输入密码")
                return
            }
            if(this.registerData.captcha==''){
                ElMessage.error("请输入验证码")
                return
            }
            const data=new FormData()
            data.append("email",this.registerData.email)
            data.append("password",this.registerData.password)
            data.append("captcha",this.registerData.captcha)
            register(data).then(response=>{
                ElMessage.success("注册成功！")
                setTimeout(()=>{
                    this.$router.push({name:'login'})
                },3000)
            })
        },
        gotoLogin(){
            this.$router.push({name:'login'})
        }
    }
}

</script>

<style scoped>
.container{
    text-align: -webkit-center;
}
</style>